<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="{__STATIC_PATH__}index/cart1/css/base.css" type="text/css">
    <link rel="stylesheet" href="{__STATIC_PATH__}index/cart1/css/global.css" type="text/css">
    <link rel="stylesheet" href="{__STATIC_PATH__}index/cart1/css/header.css" type="text/css">
    <link rel="stylesheet" href="{__STATIC_PATH__}index/cart1/css/cart.css" type="text/css">
    <link rel="stylesheet" href="{__STATIC_PATH__}index/cart1/css/footer.css" type="text/css">
    <script type="text/javascript" src="{__STATIC_PATH__}index/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script type="text/javascript" src="{__STATIC_PATH__}index/cart1/js/cart1.js"></script>
</head>
<body>
<!-- 顶部导航 start -->
<div class="topnav">
    <div class="topnav_bd w990 bc">
        <div class="topnav_left">
        </div>
        <div class="topnav_right fr">
            <ul>
                <li>
                </li>
                <li class="line">|</li>
                <li class="line">|</li>

            </ul>
        </div>
    </div>
</div>
<!-- 顶部导航 end -->

<div style="clear:both;"></div>

<!-- 页面头部 start -->
<div class="header w990 bc mt15">
    <div class="logo w990">
        <h2 class="fl"><a href="/"><img src="{__STATIC_PATH__}index/cart1/image/logo.png" alt="京西商城"></a></h2>
        <div class="flow fr">
            <ul>
                <li class="cur">1.我的购物车</li>
                <li>2.填写核对订单信息</li>
                <li>3.成功提交订单</li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面头部 end -->

<div style="clear:both;"></div>

<!-- 主体部分 start -->
<div class="mycart w990 mt10 bc">
    <h2><span>我的购物车</span></h2>
    <table>
        <thead>
        <tr>
            <th class="col1">商品名称</th>
            <th class="col3">单价</th>
            <th class="col4">数量</th>
            <th class="col5">小计</th>
            <th class="col6">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="cart" id="cart_v"}
        <tr id="{$cart_v.goods_id}">
            <td class="col1"><img src="{__PUBLIC_PATH__}images/{$cart_v.image}" alt=""><strong>{$cart_v.title}</strong></td>
            <td class="col3">￥<span>{$cart_v.price}</span></td>
            <td class="col4">
                <a href="javascript:;" class="reduce_num">-</a>
                <input type="text" name="amount" value="{$cart_v.num}" class="amount"/>
                <a href="javascript:;" class="add_num">+</a>
            </td>
            <td class="col5">￥<span>{$cart_v.price * $cart_v.num}</span></td>
            <td class="col6"><a href="javascript:;" class="btn_del">删除</a></td>
        </tr>
        {/volist}
        </tbody>
        <tfoot>
        <tr>
            <td colspan="6">购物金额总计： <strong>￥ <span id="total">1870.00</span></strong></td>
        </tr>
        </tfoot>
    </table>
    <div class="cart_btn w990 bc mt10">
                <a href="/index/index/index" class="continue">继续购物</a>
                <a href="/index/order/index" class="checkout">结 算</a>
    </div>
</div>
<!-- 主体部分 end -->

<div style="clear:both;"></div>
<!-- 底部版权 start -->
{include file="public/foot"}
<!-- 底部版权 end -->

<script>
    //    合计金额
    var total = 0;
    $(".col5 span").each(function(){
        total += parseFloat($(this).text());
    });
    $("#total").text(total.toFixed(2));

    //    删除
    $(function () {
        $(".btn_del").click(function () {
            var tr=$(this).parent().parent();
            var id=tr.attr('id');
            $.post("/index/cart/del",{id:id},function (data) {
                if(data.code>0){
                    layer.alert(data.msg,{icon:2});
                }else{
                    layer.alert(data.msg);
                    tr.remove();
                    window.location.reload();
                }
            });
        });
    });
</script>
</body>
</html>